<template>
  <div class="home">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">项目</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div slot="header">
        <span style="font-size: 16px; font-weight: bold">最近项目</span>
        <div style="float: right; margin-top: -8px">
          <el-button type="text">全部项目列表</el-button>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-card>
              <div class="box">
                <div class="box-title">XXX项目名称项目名称项目名称项目名称</div>
                <div class="box-progress">
                  <el-progress
                    :stroke-width="12"
                    :percentage="70"
                  ></el-progress>
                </div>
                <div class="box-status">
                  <span class="label">当前阶段</span>报告输出
                </div>
                <div class="box-group">
                  <span class="label">项目组</span>政企组
                </div>
                <div class="box-manage">
                  <span class="label">项目经理</span>吴春乐
                </div>
                <div class="box-number">
                  <span>周期120天</span> | <span>工作量60</span> |
                  <span>任务60</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="box">
                <div class="box-title">XXX项目名称项目名称项目名称项目名称</div>
                <div class="box-progress">
                  <el-progress
                    :stroke-width="12"
                    :percentage="70"
                  ></el-progress>
                </div>
                <div class="box-status">
                  <span class="label">当前阶段</span>报告输出
                </div>
                <div class="box-group">
                  <span class="label">项目组</span>政企组
                </div>
                <div class="box-manage">
                  <span class="label">项目经理</span>吴春乐
                </div>
                <div class="box-number">
                  <span>周期120天</span> | <span>工作量60</span> |
                  <span>任务60</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="box">
                <div class="box-title">XXX项目名称项目名称项目名称项目名称</div>
                <div class="box-progress">
                  <el-progress
                    :stroke-width="12"
                    :percentage="70"
                  ></el-progress>
                </div>
                <div class="box-status">
                  <span class="label">当前阶段</span>报告输出
                </div>
                <div class="box-group">
                  <span class="label">项目组</span>政企组
                </div>
                <div class="box-manage">
                  <span class="label">项目经理</span>吴春乐
                </div>
                <div class="box-number">
                  <span>周期120天</span> | <span>工作量60</span> |
                  <span>任务60</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="box">
                <div class="box-title">XXX项目名称项目名称项目名称项目名称</div>
                <div class="box-progress">
                  <el-progress
                    :stroke-width="12"
                    :percentage="70"
                  ></el-progress>
                </div>
                <div class="box-status">
                  <span class="label">当前阶段</span>报告输出
                </div>
                <div class="box-group">
                  <span class="label">项目组</span>政企组
                </div>
                <div class="box-manage">
                  <span class="label">项目经理</span>吴春乐
                </div>
                <div class="box-number">
                  <span>周期120天</span> | <span>工作量60</span> |
                  <span>任务60</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <span slot="header">项目统计</span>
      <div>
        <div>预估工时</div>
        <div>登记工时</div>
        <div>剩余工时</div>
        <div>预估偏差</div>
      </div>
      <div>
        <div>工时进度</div>
        <div>预估偏差率</div>
      </div>
      <div>
        <div>预估工时</div>
        <div>登记工时 + 剩余工时</div>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8">
        <el-card>
          <span slot="header">需求每日状态趋势</span>
          <stateTrend></stateTrend>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8">
        <el-card>
          <span slot="header">项目基础漏洞图</span>
          <vulnerabilityChart></vulnerabilityChart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8">
        <el-card>
          <span slot="header">项目总览</span>
          <div class="summation">
            <div class="summation-left">
              <div class="summation-left-title">所有项目</div>
              <div class="summation-left-number">200</div>
              <div class="summation-left-btn">
                <el-button type="primary" round size="mini"
                  >查看所有<i class="el-icon-right"></i
                ></el-button>
              </div>
            </div>
            <div id="c1" class="summation-right"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import vulnerabilityChart from "@/views/project/chars/vulnerabilityChart";
import stateTrend from "@/views/project/chars/stateTrend";

const data = [
  { genre: "未开始", sold: 20 },
  { genre: "进行中", sold: 12 },
  { genre: "已暂停", sold: 2 },
  { genre: "已归档", sold: 4 },
];

export default {
  name: "Home",
  components: {
    vulnerabilityChart,
    stateTrend,
  },
  mounted() {
    // Step 1: 创建 Chart 对象
    const chart = new Chart({
      container: "c1", // 指定图表容器 ID
      width: 320, // 指定图表宽度
      height: 260, // 指定图表高度
    });
    // Step 2: 载入数据源
    chart.data(data);

    // Step 3: 创建图形语法，绘制柱状图
    chart.interval().position("genre*sold");

    // Step 4: 渲染图表
    chart.render();
    const e = document.createEvent("Event");
    e.initEvent("resize", true, true);
    window.dispatchEvent(e);
  },
};
</script>
<style lang="scss" scoped>
.box {
  .box-title {
    padding: 8px 0;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .box-group {
    font-size: 14px;
  }
  .box-progress {
    padding: 10px 0;
  }
  .box-status {
    padding: 10px 0;
  }
  .box-manage {
    padding: 10px 0;
  }
  .box-number {
    padding: 8px 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .label {
    width: 72px;
    display: inline-table;
    text-align: justify;
    text-align-last: justify;
    // padding-right: 8px;
    font-weight: bold;
  }
  .label::after {
    content: ":";
    font-weight: bold;
    padding-right: 8px;
  }
}
.summation {
  display: flex;
  align-items: center;
  .summation-left {
    flex: 1;
    text-align: center;
    .summation-left-title {
      padding: 6px 0px;
    }
    .summation-left-number {
      font-size: 16px;
      font-weight: bold;
      padding: 8px 0px;
    }
    .summation-left-btn {
      padding: 8px 0px;
    }
  }
  .summation-right {
    flex: 2;
  }
}
</style>
